@charset 'gbk';

.container{
		width:1208px;
		margin:auto;
	}
.min-w{
	max-width:1366px;
	min-width:1208px;
}

/*---------- star start -----------*/
.star-set{
	width:95px;
}
.star-set .mark{
	display:inline-block;
	float:left;
	margin-left:5px;
	width:15px;
	height:14px;
	font-size:14px;
	line-height:14px;
}
.star-set .star{
	float:left;
	vertical-align:middle;
}
.star{
	display:inline-block;
	width:15px;
	height:14px;
	overflow:hidden;
}
.star-full{
	background:url("../img/star.png") no-repeat 0 0;
}
.star-half{
	background:url("../img/star.png") no-repeat -17px 0;
}
.star-empty{
	background:url("../img/star.png") no-repeat -32px 0;
}
/*---------- star end -----------*/

/*---------- course card start ------------*/
.course-card-wrapper{
	position:relative;
	width:224px;
	height:228px;
	background-color:#fff;
	box-shadow:0 4px 8px 0 #ccc;
	border-radius:4px;
	overflow:hidden;
	transition:0.3s;
}
.course-card-wrapper:hover{
	box-shadow:0 8px 16px 0 #ccc;
}
.course-card-wrapper .course-card{
	display:block;
	height:228px;
}
.course-card-wrapper .course-card .course-card-top{
	padding:0 16px;
	height:50px;
	color:#fff;
	font-size:14px;
	line-height:50px;
	background-color:#0078f0
}
.course-card-wrapper .course-card .course-card-top i{
	color:#fc0;
}
.course-card-wrapper .course-card .course-card-top .course-level{
	position:absolute;
	top:0px;
	right:24px;
	width:30px;
	height:50px;
	font-size:12px;
	color:#fff;

}
.course-card-wrapper .course-card .course-card-content{
	padding:16px 24px;
}
.course-card-wrapper .course-card .course-card-content .course-card-title{
	max-height:48px;
	font-size:14px;
	color:#07111b;
	line-height:24px;
	font-weight:normal;
	overflow:hidden;
}

.course-card-wrapper .course-card .course-card-content .course-card-desc{
	margin-top:10px;
	height:48px;
	font-size:12px;
	color:#888;
	line-height:24px;
	overflow:hidden;
}
.course-card-wrapper .course-card  .course-card-bottom{
	position:absolute;
	bottom:24px;
	left:24px;
	width:176px;
	height:24px;
	font-size:12px;
	color:#888;
	line-height:24px;
}
.course-card-wrapper .course-card .course-card-bottom:after{
	content:"";
	display:block;
	height:0;
	line-height:0;
	visibility:hidden;
	clear:both;
}
.course-card-wrapper .course-card  .course-card-bottom .course-card-info{
	float:left;
	width:100px;
}
.course-card-wrapper .course-card  .course-card-bottom .course-card-price{
	float:right;
	width:76px;
	font-size:14px;
	color:#f01414;
	text-align:right;
}
.course-card-wrapper .course-card  .course-card-bottom .course-card-price-free{
	color:#0a0;
}
/*--------*/
.course-in-action{
	position:relative;
	width:224px;
	height:352px;
	color:#fff;
	background:#0078f0;
	border-radius:4px;
	text-align:center;
	box-sizing:border-box;
}
.course-in-action .action-entrance{
	display:block;
	padding:24px 24px 16px;
	height:352px;
}
.course-in-action .action-type{
	margin-top:40px;
	font-size:24px;
	color:#fff;
}
.course-in-action .icon{
	margin-top:30px;
}
.course-in-action .icon i{
	font-size:56px;
	color:#fff;
}
.course-in-action .action-btn{
	position:absolute;
	bottom:24px;
	left:50%;
	margin-left:-60px;
	width:120px;
	height:40px;
	color:#fff;
	font-size:18px;
	line-height:40px;
	text-align:center;
	background:#01b1de;
	border-radius:3px;
}
/*-----------------*/
.course-banner-long{
	width:962px;
}
.course-banner-short{
	width:470px;
}
.course-banner{
	height:100px;
	background:#0078f0;
	border-radius:4px;
}
.course-banner .course-entrance{
	display:block;
	padding:16px 24px;
	height:68px;
	color:#fff;
}
.course-banner-long .course-entrance .course-title{
	font-size:18px;
	color:#fff;
}
.course-banner-long .course-entrance .course-desc{
	font-size:12px;
	color:#fff;
}

/*---------- course card end ------------*/

/*-------- loading start ----------*/
#loading{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	width:0;
	height:0;
	font-size:20px;
	background-color:#666;
	animation:loading-run 1.5s linear infinite;
}
#loading .point{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin:-0.2em 0 0 -0.04em;
	width:0.08em;
	height:0.4em;
	border-radius:10%;
	background-color:inherit;
}
@keyframes loading-run{
	0%{transform:rotateZ(0deg)}
	100%{transform:rotateZ(360deg);}
}
#loading-fail{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	margin:-100px 0 0 -50px;
	width:100px;
	height:100px;
	transition:top 1s ease-in-out;
}
#loading-fail i{
	font-size:100px;
	color:#999;
}
#loading-fail p{
	position:absolute;
	top:130px;
	width:100px;
	font-size:20px;
	color:#aaa;
	text-align:center;
}
/*-------- loading end ----------*/